<template>
  <div class="defaultAddress"
       style="
      position: absolute;
      background: var(--prev-bg-white);
      z-index: 9;
      width: 100%;
      border: 1px solid var(--prev-border-color-grey);
      padding: 10px;
    ">
    <el-table class="new_model"
              highlight-current-row
              ref="singleTable"
              :data="tableData"
              border
              height="300px"
              @row-dblclick="handleRowEvent">
      <template v-for="(column, index) in tableColumns">
        <el-table-column v-if="column.type === 'switch'"
                         :label="column.label"
                         :prop="column.name"
                         :key="index"
                         v-bind="$attrs">
          <template slot-scope="scope">
            <el-switch v-model="scope.row[column.name]"
                       active-color="#13ce66"
                       inactive-color="var(--prev-border-color-grey)"
                       @change="switchData(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column v-else-if="column.type === 'address'"
                         :label="column.label"
                         :key="index"
                         v-bind="$attrs"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <address-name :province="scope.row.province"
                          :city="scope.row.city"
                          :district="scope.row.district" />
          </template>
        </el-table-column>
        <el-table-column v-else
                         :label="column.label"
                         :prop="column.name"
                         :key="index"
                         :show-overflow-tooltip="true"
                         v-bind="$attrs">
        </el-table-column>
      </template>
    </el-table>
    <el-pagination background
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   :page-sizes="pageSizeOptions"
                   :page-size.sync="size"
                   :current-page.sync="page"
                   @size-change="getList"
                   @current-change="getList">
    </el-pagination>
  </div>
</template>

<script>
import AddressName from "@/components/table/column/Address.vue";
import { shippingAddress as shippingAddressApi } from "@/api/index";
export default {
  name: "DefaultAddressTable",
  components: { AddressName },
  props: {
    value: [String, Number],
    customerName: [String]
  },
  data () {
    return {
      isShowTable: false,
      desc: "",
      loading: false,
      size: 1,
      page: 1,
      total: 0,
      pageSizeOptions: [10, 20, 50, 100],
      tableColumns: [
        { label: "发货地址", name: "address" },
        { label: "省市区", name: "addressCodeList", type: "address" },
        { label: "联系人", name: "contactName" },
        { label: "联系电话", name: "contactMobile" },
        { label: "默认地址", name: "defaultFlag", type: "switch" }
      ],
      tableData: []
    };
  },

  methods: {
    // 获取地址列表
    async getList () {
      this.isShowTable = true;
      this.loading = true;
      let param = {
        customerName: this.customerName,
        desc: this.desc,
        page: this.page,
        size: this.size
      };
      let { code, data } = await shippingAddressApi.search({
        status: 1,
        ...param
      });
      if (code !== 0 || !data) return;
      this.tableData = data.records;
      this.total = data.total;

      this.loading = false;
    },

    handleRowEvent (row) {
      this.$emit("input", row);
      this.showTableEvent();
    },
    showTableEvent () {
      this.isShowTable = !this.isShowTable;
    },
    reset () {
      this.desc = "";
      this.getList();
    },
    async switchData (val) {
      console.log(val);
      let param = { shippingAddressId: val.shippingAddressId };
      let a = await shippingAddressApi.setDefaultAddress(param);
      console.log(a);
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  margin: 0 -10px 10px;
  padding: 0 10px;
  border-bottom: 1px solid var(--prev-border-color-lightgrey);
  i {
    float: right;
    color: var(--prev-icon-color-orange);
    cursor: pointer;
  }
}
</style>
